/* rem 750 */
rem()
  (round(arguments / 75 * 1000) / 1000)rem

/* 保持页面居中 */
body
  margin 0 auto
ul
  margin 0
  padding-inline-start 0
iframe
  display block
  width 100%
  margin auto
/* fn功能 */
.fn-hide
  display none

/* font-size */
.app-fontsize-xx-small
  font-size rem(24)!important
  .grapes-155
    div
     font-size rem(24)!important
.app-fontsize-x-small
  font-size rem(28)!important
  .grapes-155
    div
     font-size rem(28)!important
.app-fontsize-small
  font-size rem(32)!important
  .grapes-155
    div
     font-size rem(24)!important
.app-fontsize-medium
  font-size rem(36)!important
  .grapes-155
    div
     font-size rem(36)!important
.app-fontsize-large
  font-size rem(40)!important
  .grapes-155
    div
     font-size rem(40)!important
.app-fontsize-x-large
  font-size rem(44)!important
  .grapes-155
    div
     font-size rem(44)!important
.app-fontsize-xx-large
  font-size rem(48)!important
  .grapes-155
    div
     font-size rem(48)!important

.grapes-155 .news-content h1
  font-size 2em

.grapes-155 .news-content h2
  font-size 1.5em

.grapes-155 .news-content h3
  font-size 1.17em

.grapes-155 .news-content h4
  font-size 1em

.grapes-155 .news-content h5
  font-size 0.83em

.grapes-155 .news-content h6
  font-size 0.67em


/* app-vr app-video */
.app-vr, .app-video
  position relative
  background-color #EBEBEB
  border-radius rem(8)
  height rem(394)
  overflow hidden
  .play
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    margin auto
    width rem(52)
    height rem(52)
  .poster
    height rem(394)
    text-align center

/* app errorview */
.app-errorview
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  margin auto
  width rem(304)
  height rem(390)
  text-align center
  font-size 0
  .img
    display inline-block
    margin-bottom rem(40)
    width (304)
    height rem(298)

  .error-tip
    line-height rem(22)
    font-size rem(30)
    color #999

/* app-readnews */
.app-readnews
  width rem(48)
  height rem(48)
  background url(../img/read-news-play.png) no-repeat center center
  background-size 100% auto
  &.pause
    background url(../img/read-news-paused.png) no-repeat center center
    background-size 100% auto
/* listitem */
.app-listitem
  border-bottom rem(6) solid #F2F2F2

/* 加载更多 */
.app-listmore
  line-height 4
  font-size rem(32)
  color #999
  text-align center
.app-banner
  width rem(750)
  height rem(100)
  .banner
    display block
    position fixed
    z-index 10
    bottom 0
    width rem(750)
    height rem(100)
    background url(../img/banner.png) #fff no-repeat center center
    background-size 100%
/* 问卷 */
.app-questionaires
  .questionaires-contain
    padding rem(40) rem(24)
    .questionaires-title
      display block
      font-size rem(40)
      color #333
      line-height 1.5
    .questionaires-date
      display block
      font-size rem(24)
      color #999
      line-height 1.5
    .questionaires-content
      display block
      margin-top rem(24)
      text-align justify
      font-size rem(32)
      color #666
      line-height 1.5
    .questionaires-list
      border-bottom 1px solid #F2F2F2
      dl
        margin rem(24) 0
        border-top 1px solid #F2F2F2
        font-size rem(32)
      dt
        margin rem(18) 0
        color #666
        padding-left rem(12)
        line-height 2
      dd
        margin 0
        color #333
        line-height 1.5
        input,textarea
          display block
          padding rem(10)
          border 1px solid #d4dadf
          border-radius 3px
          width 100%
          height rem(90)
          box-sizing border-box
          outline none
          background transparent
          color #333
          font-size rem(34)
        &.check-dd
          margin rem(18) 0
          padding-left rem(72)
        .item-checkbox
          position absolute
          margin-top rem(4)
          margin-left rem(-72)
          width rem(72)
          .checkbox
            margin auto
            background #ccc
            border 2px solid #ccc
            border-radius 50%
            width rem(32)
            height @width
            overflow hidden
            span
              display none
          .checked
            border-color #237CD9
            background #237CD9
            span
              display block
              position absolute
              width rem(32)
              height @width
              background url("") no-repeat center center
              background-size 100% auto
          .discheck
            border-color #ccc
            background #ccc
        .item-content
          display block
    .questionaires-btn
      margin-top rem(32)
      text-align center
      .btn
        display inline-block
        text-align center
        width rem(476)
        height rem(90)
        line-height @height
        border-radius rem(45)
        color #fff
        background #237CD9
        font-size rem(34)
        &.disabled
          background #ccc
        &.fn-hide
          display none
      .btn-submit,.btn-reanswer
        width rem(238)
      .btn-reanswer
        background #ccc
    .questionaires-count
      margin-top rem(12)
      text-align center
      color #999
      font-size rem(24)
      line-height rem(40)


/* 投票 */
.app-vote
  .fn-left,.fn-right
    display inline
  .fn-left
    float left !important
  .fn-right
    float right !important
  .btn
    display inline-block
    height rem(72)
    line-height @height
    background rgba(11,11,11,1)
    border-radius 50%
    text-align center
    font-size rem(32)
    color #B0926A
    &.btn-xs
      height rem(44)
      line-height @height
    &.btn-sm
      padding 0 rem(24)
      height rem(62)
      line-height rem(62)
    &.btn-block
      display block
      width 100%
  body
    background #000
    -webkit-text-size-adjust 100%
  .header
    position relative
    margin auto
    width rem(750)
    height rem(300)
    img
      width 100%
      height 100%
    .time-box
      position absolute
      bottom 0
      width rem(750)
      height rem(112)
      background linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%)
    .timebar
      position absolute
      right rem(21)
      &.text
        bottom rem(22)
        color #fff
        font-size rem(28)
      span
        display inline-block
        // margin 0 rem(-12)
        padding 0 rem(10)
        min-width rem(20)
        height rem(40)
        line-height @height
        font-size rem(28)
        text-align center
        color #fff
        &:nth-child(2n+1)
          border-radius rem(6)
          background-color #B0926A
          color #000
  .tabbar
    // padding rem(23) 0
    width rem(750)
    height rem(100)
    background rgba(0,0,0,1)
    box-shadow 0 rem(4) rem(8) 0 rgba(255,255,255,0.2)
    box-sizing border-box
    p
      line-height rem(70)
    &.fixed
      position fixed
      z-index 10
      top 0
    .tabcell
      display inline-block
      margin-left rem(102)
      width rem(102)
      height rem(54)
      line-height @height
      text-align center
      border-radius rem(27)
      border 2px solid transparent
      color #999
      font-size rem(32)
    .tabcell-active
      color #fff
      border 2px solid #fff
  .tab
    display none
    .active-box
      padding rem(24)
      background-color #000
      .card-column:nth-child(2n)
        margin-left rem(-5)

    .active-abstract
      margin-bottom rem(32)
      font-size rem(32)
      color #B0926A
      .btn
        color #fff
        width rem(88)
        font-size rem(28)
        background rgba(255,255,255,0.2)
        border-radius rem(22)
    .introduct
      position relative
      margin-top rem(-15)
      margin-bottom rem(22)
      padding rem(32) rem(24)
      width rem(702)
      border-radius rem(8)
      background-color #333
      color #fff
      font-size rem(26)
      line-height rem(36)
      box-sizing border-box
      word-break break-all !important
      p
        color #fff
        font-size rem(26)
        line-height rem(36)
      &:before
        position absolute
        top rem(-35)
        right rem(25)
        content ''
        display block
        border rem(20) solid #333
        border-top-color transparent
        border-left-color transparent
        border-right-color transparent
    .list,.waterfall
      margin-top rem(-22)
      &:after
        display block
        font-size 0
        content "\200B"
        clear both
        height 0
      .card-row:first-child
        margin-top rem(44)
      .bigimg:first-child
        margin-top rem(62)
      .bigimg:last-child
        border-bottom none
    .waterfall
      .leftfall,.rightfall
        float left
        width rem(340)
        overflow auto
      .rightfall
        margin-left rem(20)
    // .list1
    //   -webkit-column-count 2
    //   -moz-column-count 2
    //   column-count 2
    //   -moz-column-gap rem(10)
    //   -webkit-column-gap rem(10)
    //   column-gap rem(10)


    //排行榜
    .lead-box
      margin 0 rem(44)
      position relative
      .left-info
        position absolute
        top rem(34)
        width rem(30)
        color #666
        font-size rem(28)
        text-align center
      .right-info
        margin-left rem(48)
        // height rem(108)
        line-height  @height
        border-bottom 2px solid #DADADA
        .leadname
          display inline-block
          padding rem(40) 0
          width rem(350)
          // height rem(108)
    .media-info
      position relative
      padding-left rem(70)
      .headimg
        position absolute
        left 0
        top rem(30)
        width rem(48)
        height rem(48)
        border-radius 50%
      p
        word-break break-all !important
        color #2B3145
        font-size rem(34)
      .infotext
        display inline-block
        height 100%
        font-size rem(34)
        color #2B3145
      .righttext
        margin-top rem(40)
        font-size rem(28)
        color #666

    //活动规则
    .rule-box
      padding rem(40) rem(32) 0
      color #2B3145
      font-size rem(30)
      line-height rem(48)
      word-break break-all !important
      p
        margin-bottom rem(48)

  .tab-active
    display block

  //列式卡片
  .card-column
    display inline-block
    margin-top rem(22)
    width rem(340)
    border-radius rem(8)
    .img-box
      position relative
      width 100%
      height rem(255)
      img
        display block
        width 100%
        height 100%
        border-top-left-radius rem(8)
        border-top-right-radius rem(8)
      .idxlogo
        left rem(20)
        top rem(16)
        width rem(62)
        height rem(48)
    .img-focus
      position absolute
      top 0
      width 100%
      height rem(255)
      background rgba(0,0,0,0.15)
      img
        display block
        margin rem(16) rem(20)
        width rem(300)
        height rem(224)
        border 1px solid #fff
        border-radius 0
    .card-content
      background #222
      padding rem(17) rem(16) rem(32)
      border-bottom-left-radius rem(8)
      border-bottom-right-radius rem(8)
      .title
        position relative
        margin-bottom rem(15)
        padding-left rem(12)
        line-height rem(48)
        word-break break-all !important
        // height rem(96)
        font-size rem(34)
        color #fff
        b
          position absolute
          left 0
          top rem(5)
          width rem(6)
          height rem(36)
          background #A88C66
      .detail
        line-height rem(48)
        font-size rem(28)
        color #fff
        &::before
          content ''
          display inline-block
          margin-right rem(8)
          width rem(26)
          height rem(24)
          background url(../img/voting.png) no-repeat center
          background-size 100%
        &.didact::before
          background url(../img/voted.png) no-repeat center
          background-size 100%
      .action
        margin rem(30) auto rem(15)
        width rem(290)
        height rem(62)
        .btn
          height rem(62)
          line-height @height
          border-radius rem(31)
          color #fff
          background-color #B0926A
          box-sizing border-box
        .outbtn
          background-color transparent
          border 1px solid #B0926A
        .forbidbtn
          background-color #999

  //media 卡片
  .card-row
    padding rem(40) 0
    // margin-left rem(22)
    border-top 2px solid #292929
    &.bigimg
      padding-top 0
      position relative
      margin-top rem(40)
      border-top none
      border-bottom 2px solid #292929
    .media
      position absolute
    .media-img
      width rem(180)
      height rem(180)
      border-radius rem(8)
    .idxlogo
      position absolute
      top rem(0)
      left rem(8)
    .card-content
      margin-left rem(204)
      min-height rem(180)
      .title
        width rem(498)
        word-break break-all !important
        line-height rem(48)
        // height rem(96)
        font-size rem(34)
        color #fff
    .basic-info
      margin-top rem(12)
      line-height rem(62)
      overflow hidden
    .actdata
      position relative
      display inline-block
      color #B0926A
      font-size rem(32)
      line-height(62)
      &:before
        content ''
        display inline-block
        margin-right rem(8)
        width rem(26)
        height rem(24)
        background url(../img/voted.png) no-repeat center
        background-size 100%
    .btn
      float right
      margin-top  rem(10)
      width rem(210)
      border-radius rem(36)
      color #fff
      background-color #B0926A
      &.outbtn
        background-color transparent
        border 1px solid #B0926A
      &.forbidbtn
        background-color #999

  .bigimg
    .media-img
      // width rem(702)
      width 100%
      height rem(234)
    .idxlogo
      position absolute
      top rem(0)
      left rem(20)
    .title
      line-height rem(48)
      word-break break-all !important
      color #fff
      font-size rem(32)

  .cardtxt
    .card-content
      margin-left rem(80)
      .title
        width rem(620)


  .idxlogo
    position absolute
    width rem(62)
    height rem(48)
    line-height rem(42)
    background url(../img/idxbg.png) no-repeat center
    background-size 100%
    color #fff
    font-size rem(34)
    text-align center
  .hoticon::before
    content''
    display inline-block
    margin-right rem(12)
    width rem(22)
    height rem(26)
    background url(../img/hoticon.png) no-repeat center
    background-size 100%
  .first-icon, .two-icon, .three-icon
    &::before
      content''
      display inline-block
      width rem(30)
      height rem(38)
      background url(../img/firsticon.png) no-repeat center
      background-size 100%
  .two-icon::before
    background url(../img/twoicon.png) no-repeat center
    background-size 100%
  .three-icon::before
    background url(../img/threeicon.png) no-repeat center
  background-size 100%

.app-votedetail
  .btn
    display inline-block
    height rem(72)
    line-height @height
    background rgba(11,11,11,1)
    border-radius 50%
    text-align center
    font-size rem(32)
    color #B0926A
    &.btn-xs
      height rem(44)
      line-height @height
    &.btn-sm
      padding 0 rem(24)
      height rem(62)
      line-height rem(62)
    &.btn-block
      display block
      width 100%
  .header
    margin rem(34) rem(32) rem(26)
    width rem(686)
    color #2B3145
    position relative
    padding-left rem(18)
    word-break break-all !important
    // height rem(48)
    // line-height @height
    font-size rem(44)
    font-weight bold

  .dividline
    margin rem(14) rem(32) rem(30)
    width rem(686)
  .main
    margin rem(26) rem(32) rem(176)
    width rem(686)
    color #2B3145
    .img-box
      margin-bottom rem(24)
      width rem(686)
      height rem(290)
      img
        width 100%
        height 100%
    .content
      font-size rem(32)
      p
        margin-bottom rem(20)
        line-height rem(60)
        font-size rem(36)
      img,video
        width rem(686)
      .poster img 
        height rem(394)
      .video-container
        display block
        position relative
      .player-icon
        display block
        position absolute
        width rem(60)
        height rem(60)
        /*left: 0.2rem; bottom: 0.2rem;*/
        top rem(190)
        left rem(340)
        transform translate(-50%, -50%)
        background url(../img/player-icon.png) no-repeat center center
        background-size 100%
  .footer
    position fixed
    left rem(223)
    bottom rem(60)
    width rem(304)
    height rem(72)
    .btn
      border-radius rem(36)
      width 100%
    .outbtn
      background-color #fff
      border 1px solid #B0926A
    .forbidbtn
      color #fff
      background-color #999


/* about */
.app-about
  .aboutme-top
    width rem(516)
    height rem(301)
    margin rem(60) auto
    background: url(/static/img/aboutme-top.jpg) no-repeat center center
    background-size 100%

  .qcode
    width rem(497)
    height rem(497)
    margin rem(80) auto rem(40)
    background: url(/static/img/qcode.png)no-repeat center center
    background-size 100%

  .abount-bottom
    font-family "microsoft yahei"
    font-size rem(32)
    text-align center
    color #888

/*隐私协议*/
.app-private
  margin-top rem(48)
  padding 0 rem(24)
  color #333
  line-height  rem(56)
  font-size rem(36)
  .part-title
    margin-bottom rem(20)
    font-weight bold
  .part-content
    margin-bottom rem(15)
    text-indent rem(72)
    .title
      margin-bottom rem(8)

/*app mlist*/
.app-mlist
  margin auto
  
  .mlist-head
    width rem(750)
    height rem(80)
    background #fcfcfc
    .swiper-container 
      position fixed
      z-index 10
      width rem(750)
      background #fcfcfc
    .list-nav
      height rem(80)
      li
        padding 0 rem(27)
        display inline-block
        width auto
        height rem(80)
        line-height @height
        font-size rem(30)
        color #5c5c5c
      .list-active
        color #237cd9
        font-size rem(34)
  .mlist-scroll
    .swiper-container 
      width rem(750)
      height rem(500)
      .swiper-pagination-bullet
        background #fff
    .list-scroll
      img
        width 100%
        height 100%
      .scroll-text
        position absolute
        left 0 
        bottom rem(0)
        padding rem(50)
        width 100%
        height 50%
        background linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0))
        color #fff
        line-height rem(60)
        font-size rem(30)
        box-sizing border-box
        

  .grapes-themelist
    position relative
    margin-bottom rem(10)
    width rem(750)
    height rem(300)
    .image
      display block
      width 100%
      height 100%
    .theme-text
      position absolute
      left rem(20)
      bottom rem(28)
      color #fff
      z-index 2
      .time
        margin-bottom rem(10)
        line-height rem(30)
        font-size rem(26)
      .title
        line-height rem(50)
        font-size rem(34)
    &::after
      content ""
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      background rgba(0,0,0,0.4)
      z-index 1
  .listmore
    padding rem(30)
    text-align center
    color #999
    font-size rem(30)
  .grapes-112 .list-item .fastnews
    height rem(150)
    overflow hidden
    .title
      -webkit-line-clamp initial

/*海报样式*/
.app-poster
  .fastimg
    display block
    margin 0 auto rem(14)
    width rem(750)
  .head
    margin rem(14) auto
    width rem(702)
    height rem(106)
    img
      width 100%
  .content
    padding rem(24) rem(24) rem(40)
    font-size rem(26)
    line-height rem(30)  
  .footer
    margin rem(10) auto rem(20)
    width rem(716)
    height rem(240)
    border-top 1px solid rgb(241,241,241)
    img
      width 100%
  .newsfooter
    padding-bottom rem(20)
    padding-top rem(50)
    margin rem(10) auto rem(20)
    width rem(716)
    height rem(132)
    border-top 1px solid rgb(241,241,241)
    img
      display block
      margin auto
      width rem(412) 

/*出版大脑详情页面css*/
.tag-content
  margin rem(50) rem(30)
  .part
    margin-bottom rem(18)
    padding-bottom rem(20)
    border-bottom 1px solid #efefef
    .title
      margin-bottom rem(10)
      color #3998FF
      font-size rem(24)
      line-height rem(24)
    .content,p
      line-height rem(44)
      font-size rem(32)
      color #272A35
      word-wrap break-word
      img
        display block
        width 100%

